<template>
    <el-card shadow="never">
        <div slot="header">动态表单(select)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/select.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            states: [
                "Alabama", "Alaska", "Arizona",
                "Arkansas", "California", "Colorado",
                "Connecticut", "Delaware", "Florida",
                "Georgia", "Hawaii", "Idaho", "Illinois",
                "Indiana", "Iowa", "Kansas", "Kentucky",
                "Louisiana", "Maine", "Maryland",
                "Massachusetts", "Michigan", "Minnesota",
                "Mississippi", "Missouri", "Montana",
                "Nebraska", "Nevada", "New Hampshire",
                "New Jersey", "New Mexico", "New York",
                "North Carolina", "North Dakota", "Ohio",
                "Oklahoma", "Oregon", "Pennsylvania",
                "Rhode Island", "South Carolina",
                "South Dakota", "Tennessee", "Texas",
                "Utah", "Vermont", "Virginia",
                "Washington", "West Virginia", "Wisconsin",
                "Wyoming"
            ],
            list: [],
            schema: {
                properties: {
                    num1: {
                        label: '名称',
                        widget: 'select',
                        enum: [
                            {value: '1', label: '苹果'},
                            {value: '2', label: '橘子', disabled: true},
                            {value: '3', label: '香蕉'},
                            {value: '4', label: '梨'},
                        ],
                        ui: {
                            clearable: true,
                            placeholder: '请选择'
                        }
                    },
                    num2: {
                        label: '禁用',
                        widget: 'select',
                        enum: [
                            {value: '1', label: '苹果'},
                            {value: '2', label: '橘子'},
                            {value: '3', label: '香蕉'},
                            {value: '4', label: '梨'},
                        ],
                        ui: {
                            disabled: true,
                            placeholder: '请选择'
                        }
                    },
                    num3: {
                        label: '多选1',
                        widget: 'select',
                        enum: [
                            {value: '1', label: '苹果'},
                            {value: '2', label: '橘子'},
                            {value: '3', label: '香蕉'},
                            {value: '4', label: '梨'},
                        ],
                        ui: {
                            multiple: true,
                            placeholder: '请选择'
                        }
                    },
                    num4: {
                        label: '多选2',
                        widget: 'select',
                        enum: [
                            {value: '1', label: '苹果'},
                            {value: '2', label: '橘子'},
                            {value: '3', label: '香蕉'},
                            {value: '4', label: '梨'},
                        ],
                        ui: {
                            multiple: true,
                            collapseTags: true,
                            placeholder: '请选择'
                        }
                    },
                    num5: {
                        label: '搜索',
                        widget: 'select',
                        enum: [
                            {value: '1', label: '苹果'},
                            {value: '2', label: '橘子'},
                            {value: '3', label: '香蕉'},
                            {value: '4', label: '梨'},
                        ],
                        ui: {
                            filterable: true,
                            placeholder: '请选择'
                        }
                    },
                    num6: {
                        label: '远程搜索',
                        widget: 'select',
                        asyncData: (resolve, query) => {
                            if(query !== '') {
                                const arr = this.list.filter(item => {
                                    return item.label.toLowerCase()
                                        .indexOf(query.toLowerCase()) > -1;
                                });
                                setTimeout(() => {
                                    resolve(arr)
                                }, 1000)
                            } else {
                                resolve(this.list)
                            }
                        },
                        ui: {
                            multiple: true,
                            filterable: true,
                            remote: true,
                            reserveKeyword: true,
                            placeholder: '请选择'
                        }
                    },
                    num7: {
                        label: '创建条目',
                        widget: 'select',
                        enum: [
                            {value: '1', label: '苹果'},
                            {value: '2', label: '橘子'},
                            {value: '3', label: '香蕉'},
                            {value: '4', label: '梨'},
                        ],
                        ui: {
                            multiple: true,
                            filterable: true,
                            allowCreate: true,
                            defaultFirstOption: true,
                            placeholder: '请选择'
                        }
                    },
                    num8: {
                        label: '异步',
                        widget: 'select',
                        asyncData: (resolve) => {
                            const arr = [
                                {value: '1', label: '苹果'},
                                {value: '2', label: '橘子'},
                                {value: '3', label: '香蕉'},
                                {value: '4', label: '梨'},
                            ];
                            setTimeout(() => {
                                resolve(arr)
                            }, 2000)
                        },
                        props: {
                            visibleAsync: true
                        },
                        ui: {
                            placeholder: '请选择'
                        }
                    },
                    num9: {
                        label: '分组',
                        widget: 'select',
                        //如果 enum 或者 asyncData 返回数据 第一层 存在 options字段，则会自动启用分组模式
                        enum: [
                            {
                                label: '水果',
                                options: [
                                    {value: 'a1', label: '苹果'},
                                    {value: 'a2', label: '橘子'},
                                    {value: 'a3', label: '香蕉'},
                                    {value: 'a4', label: '梨', disabled: true},
                                ]
                            },{
                                label: '蔬菜',
                                disabled: true,
                                options: [
                                    {value: 'b1', label: '白菜'},
                                    {value: 'b2', label: '青菜'},
                                    {value: 'b3', label: '西红柿'},
                                    {value: 'b4', label: '洋葱'},
                                ]
                            },{
                                label: '工具',
                                options: [
                                    {value: 'c1', label: '菜刀'},
                                    {value: 'c2', label: '锅'},
                                    {value: 'c3', label: '勺子'},
                                    {value: 'c4', label: '碗'},
                                ]
                            }
                        ],
                        ui: {
                            placeholder: '请选择'
                        }
                    }
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 8
                    }
                }
            },
            formData: { 
                num1: '1',
                num8: '2'
            }
        }
    },
    mounted() {
        this.list = this.states.map((v, i) => {
            return { label: v, value: v }
        })
    },
}
</script>

<style>

</style>